<template>
  <div class="recommend">
    <c-title :num="num">
      <template v-slot:title>精品推荐</template>
    </c-title>

    <div class="rc_banner">
      <van-swipe
        class="my-swipe"
        indicator-color="#000"
        :duration="1000"
        :height="130"
        :autoplay="1500"
        @change="onChange"
      >
        <van-swipe-item v-for="item in banner" :key="item.id">
          <img :src="item.img" alt="" />
        </van-swipe-item>
        <template #indicator>
          <ul class="point">
            <li 
            v-for="ele,index in banner" :key="index"
            :class="['p_dots',square == index ? 'active' :'']"
            >
              {{ index }}
            </li>
          </ul>
        </template>
      </van-swipe>
    </div>

    <ul class="list">
      <li v-for="item in bast" :key="item.id">
        <a>
          <goods-item
            :id="item.id"
            :cate_id="item.cate_id"
            :image="item.image"
            :price="item.price"
            :sales="item.sales"
            :store_name="item.store_name"
            :vip_price="item.vip_price"
          ></goods-item>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import CTitle from "@/components/ctitle/CTitle.vue";
import GoodsItem from "@/components/goods/GoodsItem.vue";
export default {
  data() {
    return {
      num: 1,
      square:0,
    };
  },
  components: {
    CTitle,
    GoodsItem,
  },
  props: {
    banner: {
      type: Array,
    },
    bast: {
      type: Array,
    },
  },
  methods: {
    onChange(index){
        this.square = index
    }
  },
};
</script>

<style lang="scss" scoped>
.recommend {
  background-color: #fff;
}
.rc_banner {
  margin: 13px 0;
  padding: 0 15px;
}
.list {
  li {
    padding: 0px 0px 12px 15px;
  }
}
.van-swipe-item {
  img {
    width: 100%;
    height: 100%;
  }
}
.van-swipe::-webkit-scrollbar {
  display: none;
}

// /deep/.van-swipe__indicators {
//   bottom: -15px;
// }
// /deep/.van-swipe__indicator {
//   width: 5px;
//   height: 5px;
//   background-color: #fc4141;
//   opacity: 1;
// }
// .van-swipe__indicator{
//   height: 4px;
//   border-radius: 2px;
// }
// .van-swipe__indicator.van-swipe__indicator--active{
//   width: 10px;
// }

.point{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  .p_dots{
    width: 4px;
    height: 4px;
    border-radius: 2px;
    margin: 0 2px;
    background-color: rgba(252, 65, 65,.7);
    
  }
  .p_dots.active{
    width: 10px;
    background-color: red;
  }
}
</style>

